<template>
  <div>
    <el-form 
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    class="loginContainer" >
        <h3 class="loginTitle">
          注册
        </h3>
        <el-form-item label="用户名" prop="username">
          <el-input 
          type="text" 
          v-model="ruleForm.username" 
          autocomplete="off" ></el-input> 
        </el-form-item>
<!-- prefix-icon="el-icon-star-off" -->
        <el-form-item label="密码" prop="password">
          <el-input 
          type="password" 
          v-model="ruleForm.password" 
          autocomplete="off"
           ></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPass">
          <el-input 
          type="password" 
          v-model="ruleForm.checkPass" 
          autocomplete="off" ></el-input>
        </el-form-item>
    
        <div style="text-align:center">
          <el-button   
          type="info" 
          tyle="width:100%" 
          @click="submitForm(ruleForm)" 
          style="width:100%; background: #505458;border: none"
          >注册</el-button>
        </div>
        

        <el-form-item >
            <router-link to="/">
             <div style="text-align:center">已有密码？登录</div> 
            </router-link>
          </el-form-item>
        
    </el-form>
  </div> 
</template>

<script>

import {registerApi} from '../../api/login.ts'
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            {required: true, message:"请输入用户名", trigger: 'blur' },
            {min:2,max:6,message:"长度2-6个字符", trigger: 'blur'}
          ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
          
        }
      };
    },

    methods: {
      submitForm(formName) {
        this.$refs.ruleForm.validate((valid)=>{
          if(valid){
            registerApi(this.ruleForm).then(res=>{
              if(String(res.code) ==='1'){
              alert('注册成功')
              this.$router.push({path:'/'})
              }
              else{
                alert(res.msg);
              }    
            })
          }
          
      })
      debugger;
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: rgb(248, 248, 248); 
        // border:1px solid blueviolet;
        // box-shadow: 0 0 25px #f885ff;
    }
    .loginTitle{
        margin: 0px auto 48px auto;
        text-align: center;
        font-size: 40px;
    }
    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
    body{
        // background-image: url("../assets/background.png") ;
        background-size:100%;
    }
</style>